<template>
  <div>
    <!-- {{albumList[0]}} -->
    <div class="userbox">
      <div class="btnBox">
        <el-button type="primary" @click="addAlbum">添加音乐</el-button>
      </div>
      <div class="searchbox">
        <el-input
          v-model="input"
          placeholder="请输入内容"
          v-on:input="sousuo"
        ></el-input>
        <span class="iconfont icon-sousuo" @click="searchs"></span>
      </div>
      <el-table
        class="listBox"
        :data="
          searchFlog
            ? searchList.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )
            : musicList.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
              )
        "
        border
        style="width: 100%"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column prop="id" label="id" width="50"> </el-table-column>
        <el-table-column prop="name" label="音乐图片" width="100">
          <template slot-scope="scope">
            <img :src="scope.row.imgUrl" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="musicCode" label="音乐编号"> </el-table-column>
        <el-table-column prop="musicName" label="音乐名"> </el-table-column>
        <el-table-column prop="singer" label="歌手名"> </el-table-column>
        <el-table-column prop="playCopyright" label="版权"> </el-table-column>
        <el-table-column prop="releaseTime" label="发布时间"> </el-table-column>
        <el-table-column prop="includeSinger" label="有无歌词">
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <div class="btnsBox">
              <el-button type="primary" size="mini" @click="alter(scope.row)"
                >修改</el-button
              >
              <el-button type="danger" size="mini" @click="clears(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 7]"
        :page-size="pagesize"
        layout="total,sizes,  prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 总数据
      musicList: [],
      // 搜索结果
      searchList: [],
      // 是否显示搜索值
      searchFlog: false,
      //当前页数
      currentPage: 1,
      // 每页显示条数
      pagesize: 5,
      // 总条数
      totalCount: 0,
      //   输入框
      input: "",
      Url: "http://192.168.0.26:8081",
    };
  },
  mounted() {
    var Id = JSON.parse(sessionStorage.getItem("albumId"));
    var list = JSON.parse(sessionStorage.getItem("musicList"));

    if (list != null && list.length != 0) {
      if (list[0].albumId == Id) {
        this.musicList = list;
        this.totalCount = list.length;
      } else {
        this.getmusicList(Id);
      }
    } else {
      this.getmusicList(Id);
    }

    var breaks = this.$route.params.breaks;
    if (breaks) {
      this.getmusicList(Id);
    }
  },
  methods: {
    // 获取数据
    getmusicList(id) {
      this.$axios.get(`api/album/getAlbumById?id=${id}`).then((res) => {
        // console.dir(res.data.data.music);
        var list = res.data.data.music;
        for (let i = 0; i < list.length; i++) {
          list[i].imgUrl = this.Url + list[i].imgUrl;
          if (list[i].releaseTime != "" && list[i].releaseTime != null) {
            list[i].releaseTime = list[i].releaseTime.split(" ")[0];
          }
        }
        sessionStorage.setItem("musicList", JSON.stringify(list));
        this.musicList = list;
        this.totalCount = list.length;
        console.dir(list);
      });
    },
    // 添加音乐
    addAlbum() {
      this.$router.push({ path: "/addMusic", query: { alter: true } });
    },
    // 搜索
    sousuo(e) {
      this.input = e;
    },
    searchs() {
      this.$axios
        .get(`api/music/getMusic?musicName=${this.input}`)
        .then((res) => {
          console.dir(res.data.data);
          var list = res.data.data;
          var arrs = [];
          for (let i = 0; i < list.length; i++) {
            if (list[i].albumId == sessionStorage.getItem("albumId")) {
              list[i].imgUrl = this.Url + list[i].imgUrl;
              arrs.push(list[i]);
            }
          }
          this.searchList = arrs;
          this.totalCount = arrs.length;
          this.searchFlog = true;
          console.dir(arrs);
        });
    },
    // 每页显示几条
    handleSizeChange(val) {
      this.pagesize = val;
      //   this.getPackData(); //根据用户获取的每页显示页面数量显示页面
    },
    // 操作当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      // this.getPackData();//获取用户点击的当前页后刷新页面数据
    },
    // 修改音乐
    alter(val) {
      console.log(val);
      var obj = {};
      obj.musicImg = val.imgUrl;
      obj.musicName = val.musicName;
      obj.releaseTime = val.releaseTime;
      obj.id = val.id;
      obj.musicLyric = val.musicLyric;
      obj.url = val.url;
      this.$router.push({
        path: "/addMusic",
        query: { obj: JSON.stringify(obj) },
      });
    },
    // 删除
    clears(val) {
      this.$confirm("此操作将删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(`api/music/deleteMusicById?id=${val.id}`)
            .then((res) => {
              if (res.data.msg == "操作成功") {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                var id = sessionStorage.getItem("albumId");
                this.getmusicList(id);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查看音乐
    ViewMusic(val) {},
  },
};
</script>
<style scoped>
.btnBox {
  text-align: left;
}
.imgs {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
}
img {
  display: inline-block;
  width: 70px;
  height: auto;
  max-height: 70px;
}
.listBox {
  max-height: 600px;
}
.userbox {
  margin: 20px 20px;
  border-radius: 5px;
  padding: 10px 20px;
  box-sizing: border-box;
  background: white;
}
.searchbox {
  margin: 20px 20px 20px 0;
  display: flex;
  align-content: space-around;
  width: 300px;
}
span {
  display: block;
  background: skyblue;
  height: 40px;
  width: 40px;
  line-height: 40px;
  margin-left: 20px;
  font-size: 20px;
  color: white;
  border-radius: 5px;
}
.btnsBox {
  text-align: center;
}
.introText {
  width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>